<template lang='pug'>
.computed-box
    .top
        .active
        img(src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1bc92bd7fdb80c023c6887ae4f419e71.jpg?f=webp")
        .active
    .content
        .wrapcon
        Fir(v-for="d in arrList" :data="d" :width="'99%'" flg="0")
    .top
        .active
        img(src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a6c6904c72672a67f1ddb6d4938d414.jpg?f=webp")
        .active  
    .botList
        Fir(v-for="d in botList" :data="d" :width="'48%'" flg="0")  
    .top
        .active
        img(src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aeb37b208fc7303d6a6e16b57e4e1942.jpg?f=webp")
        .active  
    .top
        img(src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e320df8ff307626d984f1708d3c961f2.jpg?f=webp")
        .active
        img(src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed0de51cddbd973e1ac2e27ba05a0693.jpg?f=webp" style="height: .36rem")
    .btn
        ul
            li(v-for="d in bntList")
                img(:src="d")
</template>
 
<script>
import Fir from '../../components/Fir.vue'
export default {
  name: "vueName",
  data() {
    return {
        arrList:'',
        botList:'',
        bntList:''
    };
  },
  components:{
      Fir
  },
  methods:{
    getList(){
        this.$http.get('/ajaxdata/computed/index.json').then(({data})=>{
            this.arrList = data.arrList
            this.botList = data.botList
        })
    },
    getbnt(){
        this.$http.get('/ajaxdata/computed/bottomLi.json').then(val=>{
            this.bntList = val.data
        })
    }
  },
  mounted(){
      this.getList();
      this.getbnt()
  }
};
</script>
 
<style scoped lang="sass">
.computed-box
    width: 100%
    .top
        width: 100%
        .active
            width: 100%
            height: 0.138rem
            background: rgb(72, 120, 166)
        img
            width: 100%
            display: block
            height: .41rem
    .content
        width: 100%
        padding: .1rem
        background: rgb(72, 120, 166)
    .botList
        width: 100%
        display: flex
        justify-content: space-around
        background: rgb(72, 120, 166)
    .btn
        width: 100%
        ul
            width: 100%
            display: flex
            flex-wrap: wrap
            justify-content: center
            
            li
                width: 48%
                height: .81rem
                img
                    width: 100%
                    height: 100%

</style>    